<template>
    <div>
        <div class='recommend-title'>
            周末去哪
        </div>
        <ul>
            <li class='item border-bottom' v-for='item of weekendlist' :key='item.id'>
                <div class="item-img-wrapper">
                    <img class='item-img' :src='item.imgurl'>
                </div>
                <div class='item-info'>
                    <p class='item-title'>{{item.title}}</p>
                    <p class='item-desc'>{{item.desc}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
    export default{
        name: 'HomeWeekend',
        props: {
            weekendlist: Array
        }
    }
</script>
<style lang='stylus' scoped>
@import '~styles/mixins.styl'
    .recommend-title
        height: .8rem
        line-height: .8rem
        background: #eee
        text-indent: .4rem
        margin-top: .2rem
    .item-img-wrapper
        width: 100%
        height: 0
        overflow: hidden
        padding-bottom: 43.37288%    
        .item-img
            width: 100%
    .item-info
        padding: .1rem
        min-width: 0
        flex: 1
        .item-title
            line-height: .70rem
            font-size: .32rem
            ellipsis()
        .item-desc
            line-height: .4rem
            color: #ccc
            ellipsis()
        
                
</style>
